<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" 	uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="tiles" 	uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c"		uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" 	uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page language="java" pageEncoding="utf-8"%>

<script type="text/javascript">
$(document).ready(function(){
	setMenuSelection("contracte");
	
    $("#tabContractsCard").kendoTabStrip({
        animation:  {
            open: {
                effects: "fadeIn"
            }
        }
    });	  
    
    $("#pContractDate").kendoDatePicker({
    	 format: "dd.MM.yyyy"
    });
    
    $("#pRefCompany").kendoDropDownList();
    
    $("#listView").kendoListView({
    	dataSource: {
            data: [
                {
                	id:"1",	
                    label: "Test field 1",
                    itemType: "k-textbox",
                    required: "required",
                    dataRole:"",
                    value: "v1",
                    Html:"<input type='text'>"},
                {
                    id:"2",	
                	label: "Test field 2",
                    itemType: "k-textbox",
                    required: "",
                    dataRole:"",
                    value: "v2",
                    Html:"<input type='text'>"
            									},
            	{
	                id:"3",	
	            	label: "Test field 2",
	                itemType: "k-textbox",
	                required: "required",
	                dataRole:"datepicker",
	                value: "v2",
                    Html:"<input type='text'>"
        										},
				{
                    id:"4",	
                	label: "Test field 2",
                    itemType: "k-textbox",
                    required: "",
                    dataRole:"",
                    value: "v2",
                    Html:"<input type='text' class='k-textbox'>"
            }
         	]
        },
        selectable: true,
        navigatable: true,
        editable: true,
//        template: '<li><input type="text" value="#:FirstName#" name="FirstName" class="k-textbox"/></li>'
    	   template: '<li> <label  for="#:id#" class="#:required#">#:label#:&nbsp; </label><input type="text" value="#:value#" name="#:id#" class="#:itemType#" data-role="#:dataRole#"/> </li>'
//template: '<li>#= data.Html # </li>'
   });
    
    
    
    
    
    
    $("#pRegCompanies").kendoComboBox();
    
    $("#btPersonsList").kendoButton({
        icon: "funnel"
    });

    $("#btPersonsCard").kendoButton({
        icon: "plus"
    });
    
    $("#btPersonsCardSubmit").kendoButton({
        icon: "tick"
    });

    $("#btPersonsCardReset").kendoButton({
        icon: "cancel"
    });
    
    $("#btPersonsCardApply").kendoButton({
        icon: "custom"
    });
    
});


function SubmitFormPersonsCard(pPostOperation){
	var formAction = $("#formPersonsCard").attr( 'action' );
	$("#formPersonsCard").attr('action', formAction + '?pPostOperation='+pPostOperation);
	$("#formPersonsCard").submit();
}


</script>

<CENTER>
<p style="text-align: left;">
	<button id="btPersonsList" type="button" onclick="javascript:window.open('vizualizeazaContracte', target='_self')";>Lista contractelor</button>
	<button id="btPersonsCard" type="button" onclick="javascript:window.open('adaugaContract', 		target='_self')";>Adaugă contract</button>
	<c:if test="${errorMessage != '' &&  errorMessage != '0'}">
		<span id="errorMessage" class="errorMessage"> ${errorMessage} </span>
	</c:if>
	
</p>
<form:form id="formPersonsCard" method="post" commandName="contractItem" action="adaugaClientiPersoana">
<div id="tabContractsCard" style="text-align: left;" >
	<ul>
	    <li class="k-state-active">
	              Părţile contractante
	    </li>
	    <li class="k-state-active">
	              Obiectul contractului
	    </li>
	    <li class="k-state-active">
	              Ancheta
	    </li>
	</ul> 
	<div>
			<div class="k-block k-shadow">
				<ul class="forms" style="font-size: 14px;">
					<form:hidden id="pId" path="id" name="id"/>
					<li>
						<label  for="pContractNo" class="required">Numarul contractului: </label> 		<form:input type="text" id="pContractNo" 	 		path="contractNo"  		name="contractNo" 	maxlength="13" style="width:150px;" class="k-textbox" required="true"/> 
					</li>
					<li>
						<label  for="pContractDate" class="required">Data contractului: </label> 			<form:input type="text" id="pContractDate" 		path="contractDate"  	name="contractDate" style="width:250px;"  class="k-textbox"  required="true" data-role="datepicker" role="textbox"/>
					</li>
					<li>	
						<label  for="pRefCompany" >Compania:   </label> 
						<form:select id="pRefCompany" path="refCompany.id" style="width:300px;" >
							<option value="Select" label=" - Selectati - " ></option>
		     					<form:options items="${refCompanyCBX}" itemValue="id" itemLabel="mdValue"/>
		   				</form:select>					
					</li>
				
				<ul id="listView"></ul>
				</ul>
			</div>
			</div>
			
			<div>
				<div class="k-block k-shadow">
					<ul class="forms" style="font-size: 14px;">
									
					</ul>	
				</div>	
			</div>
			
			<div>
				<div class="k-block k-shadow">
					<ul class="forms" style="font-size: 14px;">
						
					</ul>	
				</div>
			</div>
 </div>			
			<p style="text-align: right;">
				<button id="btPersonsCardApply"		type="button" onclick="SubmitFormPersonsCard('remain')" 	>Aplică</button>
				<button id="btPersonsCardSubmit" 	type="button" onclick="SubmitFormPersonsCard('close')"  >Salvează</button>
				<button id="btPersonsCardReset" 	type="reset"  onclick="javascript: window.history.back();">Anulează</button>
			</p> 		
							
		  

</form:form> 
    
</CENTER>
<style scoped>
     #formPersonsCard ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
     #formPersonsCard li {
         margin: 10px 0 0 0;
     }

     label {
         display: inline-block;
         width: 300px;
         text-align: right;
     }
     
     input {
     	height: 10px;
     }

     .required {
         font-weight: bold;
     }

     .accept, .status {
         padding-left: 90px;
     }

     .valid {
         color: green;
     }

     .invalid {
         color: red;
     }
     span.k-tooltip {
         margin-left: 6px;
     }
 </style>



